<template>
    <!-- 主容器 -->
    <div class="clean-container">
      <!-- 顶部搜索栏 -->
      <div class="search-bar">
        <el-input
          v-model="searchQuery"
          placeholder="搜索服务套餐"
          class="search-input"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="searchPackages">搜索</el-button>
      </div>
  
      <!-- 套餐列表展示区域 -->
      <div class="package-list">
        <!-- 加载状态指示器 -->
        <div v-if="loading" class="loading-indicator">
          <el-icon class="is-loading"><Loading /></el-icon>
          加载中...
        </div>
        
        <!-- 套餐卡片列表 -->
        <div v-else class="packages">
          <!-- 单个套餐卡片 -->
          <el-card
  v-for="pkg in filteredPackages"
  :key="pkg.serviceId"
  class="package-card"
  shadow="hover"
>
  <!-- 套餐图片轮播 -->
  <div class="package-images">
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="(image, index) in getImageList(pkg.images)" :key="index">
        <img :src="image" class="carousel-image" alt="服务图片" />
      </el-carousel-item>
    </el-carousel>
  </div>
  
  <!-- 套餐内容信息 -->
  <div class="package-content">
    <h3 class="package-name">{{ pkg.name }}</h3>
    <div class="package-price">
      <span class="price">¥{{ pkg.price }}</span>
      <span class="unit">/次</span>
    </div>
    <div class="package-desc">
      <el-icon><InfoFilled /></el-icon>
      <span>{{ pkg.description }}</span>
    </div>
    <div class="package-meta">
      <el-tag type="info" size="small">
        <el-icon><User /></el-icon>
        已服务{{ pkg.serviceCount }}次
      </el-tag>
      <el-tag type="success" size="small">
        <el-icon><Star /></el-icon>
        {{ pkg.rating }}分
      </el-tag>
    </div>
  </div>
  
  <!-- 套餐操作按钮 -->
  <div class="package-actions">
    <el-button type="primary" @click="showBookingDialog(pkg)">
      <el-icon><Calendar /></el-icon> 立即预约
    </el-button>
    <el-button @click="showDetail(pkg)">
      <el-icon><View /></el-icon> 查看详情
    </el-button>
  </div>
</el-card>
        </div>
        
        <!-- 分页控件 -->
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="totalPackages"
            :page-sizes="[6, 12, 18, 24]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
  
      <!-- 预约对话框 -->
      <el-dialog v-model="bookingDialogVisible" title="预约家政服务" width="50%">
        <el-form :model="bookingForm" label-width="100px">
          <el-form-item label="服务套餐" required>
            <el-input v-model="bookingForm.packageName" disabled />
          </el-form-item>
          <el-form-item label="服务价格" required>
            <el-input v-model="bookingForm.price" disabled />
          </el-form-item>
          <el-form-item label="预约时间" required>
            <el-date-picker
              v-model="bookingForm.bookingTime"
              type="datetime"
              placeholder="选择预约时间"
              :disabled-date="disabledDate"
              :shortcuts="shortcuts"
            />
          </el-form-item>
          <el-form-item label="服务地址" required>
            <el-input
              v-model="bookingForm.address"
              type="textarea"
              :rows="3"
              placeholder="请输入详细服务地址"
            />
          </el-form-item>
          <el-form-item label="特殊要求">
            <el-input
              v-model="bookingForm.requirements"
              type="textarea"
              :rows="4"
              placeholder="请输入您的特殊要求（如重点清洁区域等）"
            />
          </el-form-item>
          <el-form-item label="联系人" required>
            <el-input v-model="bookingForm.contactName" placeholder="请输入联系人姓名" />
          </el-form-item>
          <el-form-item label="联系电话" required>
            <el-input v-model="bookingForm.contactPhone" placeholder="请输入联系电话" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="bookingDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitBooking">确认预约</el-button>
          </span>
        </template>
      </el-dialog>
  
      <!-- 套餐详情对话框 -->
      <el-dialog v-model="detailDialogVisible" title="套餐详情" width="60%">
        <div v-if="currentPackage" class="package-detail">
          <div class="detail-header">
            <h2>{{ currentPackage.name }}</h2>
            <div class="detail-price">
              <span class="price">¥{{ currentPackage.price }}</span>
              <span class="unit">/次</span>
            </div>
          </div>
          
          <el-divider />
          
          <div class="detail-content">
            <h3>服务内容</h3>
            <div class="service-content">
              {{ currentPackage.description }}
            </div>
            
            <h3>服务流程</h3>
            <div class="service-process">
              <el-steps :active="3" align-center>
                <el-step title="预约确认" description="客服将在30分钟内与您确认" />
                <el-step title="上门服务" description="师傅按约定时间上门" />
                <el-step title="服务完成" description="验收满意后付款" />
              </el-steps>
            </div>
            
            <h3>服务图片</h3>
            <div class="service-images">
              <el-image
                v-for="(img, index) in getImageList(currentPackage.images)"
                :key="index"
                :src="img"
                :preview-src-list="getImageList(currentPackage.images)"
                fit="cover"
                class="detail-image"
              />
            </div>
          </div>
          
          <div class="detail-actions">
            <el-button type="primary" size="large" @click="showBookingDialog(currentPackage)">
              <el-icon><Calendar /></el-icon> 立即预约
            </el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from 'vue'
  import {
    Search,
    Calendar,
    View,
    InfoFilled,
    Loading,
    User,
    Star
  } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  
  // 搜索关键词
  const searchQuery = ref('')
  
  // 分页相关状态
  const currentPage = ref(1)      // 当前页码
  const pageSize = ref(6)         // 每页显示数量
  const totalPackages = ref(0)    // 套餐总数
  
  // 对话框显示状态
  const bookingDialogVisible = ref(false)  // 预约对话框
  const detailDialogVisible = ref(false)   // 详情对话框
  const currentPackage = ref(null)         // 当前选中的套餐
  
  // 预约表单数据
  const bookingForm = ref({
    packageId: null,          // 套餐ID
    packageName: '',          // 套餐名称
    price: '',                // 价格
    bookingTime: '',          // 预约时间
    address: '',              // 服务地址
    requirements: '',         // 特殊要求
    contactName: '',          // 联系人
    contactPhone: ''          // 联系电话
  })
  
  // 时间选择快捷选项配置
  const shortcuts = [
    {
      text: '今天',
      value: new Date()
    },
    {
      text: '明天',
      value: () => {
        const date = new Date()
        date.setTime(date.getTime() + 3600 * 1000 * 24)
        return date
      }
    },
    {
      text: '一周后',
      value: () => {
        const date = new Date()
        date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
        return date
      }
    }
  ]
  
  /**
   * 禁用过去的日期
   * @param {Date} time 待检查的日期
   * @returns {boolean} 是否禁用
   */
  const disabledDate = (time) => {
    return time.getTime() < Date.now() - 8.64e7
  }
  
  // 加载状态
  const loading = ref(false)
  
  /**
   * 模拟的家政服务套餐数据
   * 数据结构与服务端返回的Services实体类一致
   */
  const mockPackages = [
    {
      serviceId: 1,
      name: '日常保洁套餐',
      providerId: 101,
      description: '包含地面清洁、卫生间清洁、厨房表面清洁、家具表面除尘等基础清洁服务',
      price: 150,
      images: 'https://picsum.photos/600/400?random=1,https://picsum.photos/600/400?random=2',
      status: 0,
      createTime: '2025-05-09 10:43:30',
      serviceCount: 128,    // 模拟服务次数
      rating: '4.8'        // 模拟评分
    },
    {
      serviceId: 2,
      name: '深度清洁套餐',
      providerId: 102,
      description: '包含日常保洁所有项目，加窗户清洁、厨房深度去油、卫生间消毒等深度清洁服务',
      price: 280,
      images: 'https://picsum.photos/600/400?random=3,https://picsum.photos/600/400?random=4',
      status: 0,
      createTime: '2025-05-10 09:15:22',
      serviceCount: 86,
      rating: '4.9'
    },
    {
      serviceId: 3,
      name: '开荒保洁套餐',
      providerId: 103,
      description: '专为新装修房屋设计，包含全屋除尘、玻璃清洁、地面打蜡、装修残留清理等服务',
      price: 350,
      images: 'https://picsum.photos/600/400?random=5,https://picsum.photos/600/400?random=6',
      status: 0,
      createTime: '2025-05-11 14:30:45',
      serviceCount: 64,
      rating: '4.7'
    },
    {
      serviceId: 4,
      name: '厨房专项清洁',
      providerId: 104,
      description: '专注厨房清洁，包含油烟机清洗、灶台去油、橱柜清洁、墙面除渍等服务',
      price: 200,
      images: 'https://picsum.photos/600/400?random=7,https://picsum.photos/600/400?random=8',
      status: 0,
      createTime: '2025-05-12 11:20:18',
      serviceCount: 92,
      rating: '4.6'
    },
    {
      serviceId: 5,
      name: '卫生间专项清洁',
      providerId: 105,
      description: '专注卫生间清洁，包含马桶消毒、瓷砖除垢、淋浴房清洁、地漏疏通等服务',
      price: 180,
      images: 'https://picsum.photos/600/400?random=9,https://picsum.photos/600/400?random=10',
      status: 0,
      createTime: '2025-05-13 16:45:33',
      serviceCount: 105,
      rating: '4.5'
    },
    {
      serviceId: 6,
      name: '全屋大扫除套餐',
      providerId: 106,
      description: '包含所有区域的深度清洁，适合季度大扫除，3人团队4小时服务',
      price: 450,
      images: 'https://picsum.photos/600/400?random=11,https://picsum.photos/600/400?random=12',
      status: 0,
      createTime: '2025-05-14 13:10:27',
      serviceCount: 57,
      rating: '4.9'
    }
  ]
  
  // 套餐数据
  const packages = ref([])
  
  /**
   * 获取套餐列表数据
   * 模拟API调用，实际项目中替换为真实的API调用
   */
  const fetchPackages = () => {
    loading.value = true
    // 模拟API请求延迟
    setTimeout(() => {
      packages.value = mockPackages
      totalPackages.value = mockPackages.length
      loading.value = false
    }, 800)
  }
  
  /**
   * 处理图片字符串，转换为数组
   * @param {string} images 图片字符串，用逗号分隔
   * @returns {Array} 图片URL数组
   */
  const getImageList = (images) => {
    if (!images) return []
    return images.split(',').map(img => img.trim())
  }
  
 /**
 * 计算属性：过滤后的套餐列表
 * 根据搜索关键词和分页设置过滤数据
 * @return {Array} 过滤并分页后的套餐列表
 */
const filteredPackages = computed(() => {
  let result = packages.value
  
  // 按搜索关键词过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase().trim()  // 去除前后空格并转为小写
    result = result.filter(pkg => (
      pkg.name.toLowerCase().includes(query) || 
      pkg.description.toLowerCase().includes(query) ||
      (pkg.tags && pkg.tags.some(tag => tag.toLowerCase().includes(query)))  // 如果套餐有标签，也加入搜索范围
    ))  // 这里补全了缺少的右括号
  }
  
  // 分页处理
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return result.slice(start, end)
})
  /**
   * 搜索套餐
   */
  const searchPackages = () => {
    currentPage.value = 1
  }
  
  /**
   * 分页大小改变事件处理
   * @param {number} size 新的每页大小
   */
  const handleSizeChange = (size) => {
    pageSize.value = size
    currentPage.value = 1
  }
  
  /**
   * 当前页改变事件处理
   * @param {number} page 新的页码
   */
  const handleCurrentChange = (page) => {
    currentPage.value = page
  }
  
  /**
   * 显示预约对话框
   * @param {Object} pkg 选中的套餐对象
   */
  const showBookingDialog = (pkg) => {
    currentPackage.value = pkg
    bookingForm.value = {
      packageId: pkg.serviceId,
      packageName: pkg.name,
      price: pkg.price,
      bookingTime: '',
      address: '',
      requirements: '',
      contactName: '',
      contactPhone: ''
    }
    bookingDialogVisible.value = true
  }
  
  /**
   * 提交预约
   * 模拟预约提交过程
   */
  const submitBooking = () => {
    // 表单验证
    if (!bookingForm.value.bookingTime) {
      ElMessage.error('请选择预约时间')
      return
    }
    if (!bookingForm.value.address) {
      ElMessage.error('请输入服务地址')
      return
    }
    if (!bookingForm.value.contactName) {
      ElMessage.error('请输入联系人姓名')
      return
    }
    if (!bookingForm.value.contactPhone) {
      ElMessage.error('请输入联系电话')
      return
    }
  
    // 模拟提交过程
    loading.value = true
    setTimeout(() => {
      loading.value = false
      bookingDialogVisible.value = false
      ElMessage.success('预约成功！客服将尽快与您确认')
      
      // 重置表单
      bookingForm.value = {
        packageId: null,
        packageName: '',
        price: '',
        bookingTime: '',
        address: '',
        requirements: '',
        contactName: '',
        contactPhone: ''
      }
    }, 1000)
  }
  
  /**
   * 显示套餐详情
   * @param {Object} pkg 选中的套餐对象
   */
  const showDetail = (pkg) => {
    currentPackage.value = pkg
    detailDialogVisible.value = true
  }
  
  // 组件挂载时获取数据
  onMounted(() => {
    fetchPackages()
  })
  </script>
  
  <style scoped>
  .clean-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .search-bar {
    display: flex;
    margin-bottom: 20px;
    gap: 10px;
  }
  
  .search-input {
    flex: 1;
  }
  
  .package-list {
    margin-top: 20px;
  }
  
  .loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: var(--el-color-primary);
    gap: 10px;
  }
  
  .packages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
  }
  
  .package-card {
    margin-bottom: 20px;
    transition: all 0.3s;
  }
  
  .package-card:hover {
    transform: translateY(-5px);
  }
  
  .package-images {
    margin-bottom: 15px;
  }
  
  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .package-content {
    padding: 0 15px;
  }
  
  .package-name {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: var(--el-text-color-primary);
  }
  
  .package-price {
    margin-bottom: 10px;
  }
  
  .package-price .price {
    font-size: 24px;
    font-weight: bold;
    color: var(--el-color-primary);
  }
  
  .package-price .unit {
    font-size: 14px;
    color: var(--el-text-color-secondary);
  }
  
  .package-desc {
    display: flex;
    align-items: flex-start;
    margin: 15px 0;
    color: var(--el-text-color-secondary);
    line-height: 1.5;
  }
  
  .package-desc .el-icon {
    margin-right: 8px;
    flex-shrink: 0;
  }
  
  .package-meta {
    display: flex;
    gap: 10px;
    margin: 15px 0;
  }
  
  .package-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    padding: 0 15px 15px;
  }
  
  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
  
  /* 详情对话框样式 */
  .package-detail {
    padding: 10px;
  }
  
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .detail-price {
    text-align: right;
  }
  
  .detail-price .price {
    font-size: 28px;
    font-weight: bold;
    color: var(--el-color-primary);
  }
  
  .detail-price .unit {
    font-size: 16px;
    color: var(--el-text-color-secondary);
  }
  
  .detail-content {
    margin-top: 20px;
  }
  
  .detail-content h3 {
    margin: 25px 0 15px;
    color: var(--el-text-color-primary);
  }
  
  .service-content {
    line-height: 1.8;
    color: var(--el-text-color-regular);
  }
  
  .service-process {
    margin: 20px 0;
  }
  
  .service-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .detail-image {
    width: 200px;
    height: 150px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .detail-actions {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .packages {
      grid-template-columns: 1fr;
    }
    
    .package-card {
      margin-bottom: 15px;
    }
    
    .detail-image {
      width: 100%;
      height: auto;
    }
  }
  </style>